<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="李愧愧">
    <title></title>
    <style>
        body{
            background-color: rgb(163, 198, 168);
        }
        .box{
            width: 900px;
            margin: 0 auto;
        }
        .box .box1 {
            margin-bottom: 5px;
        }
        .box .box1 span{
            display: inline-block;
            width: 20px;
            height: 20px;
            box-sizing: border-box;

        }
        .box .box1 span i{
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-left: 5px;
        }
        .span1{
            background-color: red;
        }
        .span2{
            background-color: green;
        }
        .span3{
            background-color: black;
        }
        .box2{
            background-color: green;
        }
        .box2 span{
            display: inline-block;
            width: 150px;
            height: 50px;
            border: 2px solid white;
            text-align: center;
            line-height: 50px;
            color: white;
            font-weight: bold;
            box-sizing: border-box;
            
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            <span class="span1"><i></i></span>
            <span class="span2"><i></i></span>
            <span class="span3"><i></i></span>
        </div>
        <div class="box2">
            <span>新闻</span><span>娱乐</span><span>体育</span><span>电影</span><span>音乐</span><span>旅游</span>
        </div>
    </div>
<script>
    var body =document.querySelector('body');
    var box =document.querySelector('.box2');
    var i = document.getElementsByTagName('i');
    var span1 =document.querySelector('.span1');
    var span2 =document.querySelector('.span2');
    var span3 =document.querySelector('.span3');

    span1.onclick=function(){
        i[0].style='background-color: #fff;'
        i[1].style=''
        i[2].style=''
        body.style='background-color: rgb(255, 221, 220);'
        box.style='background-color: red;'
    }
    span2.onclick=function(){
        i[1].style='background-color: #fff;'
        i[0].style=''
        i[2].style=''
        body.style='background-color: rgb(163, 198, 168);'
        box.style='background-color: green;'
    }
    span3.onclick=function(){
        i[2].style='background-color: #fff;'
        i[1].style=''
        i[0].style=''
        body.style='background-color: rgb(204, 204, 204);'
        box.style='background-color: black;'
    }

</script>
</body>
</html>